import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import '../custom_animated_bottom_bar.dart';

class FirstPage extends StatefulWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int _currentIndex = 0;

  get bodyWidget => <Widget>[
        Lottie.asset('assets/404.json'),
        Lottie.asset('assets/404.json'),
        Lottie.asset('assets/404.json'),
        Lottie.asset('assets/404.json'),
      ];

  Widget getBody() {
    return Center(
      child: Container(child: bodyWidget[_currentIndex]),
    );
  }

  get _drawer => Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
                decoration: BoxDecoration(color: Colors.lightBlue),
                child: Center(
                  child: SizedBox(
                    width: 60,
                    height: 60,
                    child: CircleAvatar(
                      child: Text("R"),
                    ),
                  ),
                )),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/second');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('第二页-消消看'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/third');
              },
              leading: Icon(
                Icons.audiotrack,
                color: Colors.green,
                size: 30.0,
              ),
              title: Text('第三页-Lottie动画'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/fourth');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('第四页-Sliver学习'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/fifth');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('第五页-Sliver实现好看的Appbar'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/sixth');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('第六页-再了解一些其他的Sliver组件'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/seventh');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('实战——Sliver制作SNH48成员列表'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/flappyBirdGame');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('实战FlappyBird'),
            ),
            ListTile(
              onTap: () {
                Navigator.pushNamed(context, '/snake');
              },
              leading: Icon(
                Icons.favorite,
                color: Colors.pink,
                size: 24.0,
                semanticLabel: 'Text to announce in accessibility modes',
              ),
              title: Text('贪吃蛇测试'),
            )

          ],
        ),
      );

  final titles = ['首页', '搜索', '排名', '直播'];
  final bodyImages = [];
  Color backgroundColor = Color(0xFF050B18);
  Color _inactiveColor = Colors.grey;

  Widget _buildBottomBar() {
    return CustomAnimatedBottomBar(
      containerHeight: 56,
      backgroundColor: backgroundColor,
      selectedIndex: _currentIndex,
      showElevation: true,
      itemCornerRadius: 24,
      curve: Curves.easeInOut,
      onItemSelected: (index) => setState(() => _currentIndex = index),
      items: <MyBottomNavigationBarItem>[
        MyBottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(titles[0]),
          activeColor: Color(0xffF4D144),
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
        MyBottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text(titles[1]),
          activeColor: Colors.purpleAccent,
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
        MyBottomNavigationBarItem(
          icon: Icon(Icons.apps),
          title: Text(
            titles[2],
          ),
          activeColor: Colors.pink,
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
        MyBottomNavigationBarItem(
          icon: Icon(Icons.video_camera_front),
          title: Text(titles[3]),
          activeColor: Colors.blue,
          inactiveColor: _inactiveColor,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: backgroundColor,
        brightness: Brightness.dark,
        actions: [
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {
              print('添加按钮');
            },
          )
        ],
        title: Center(
          child: Text(titles[_currentIndex]),
        ),
      ),
      body: getBody(),
      drawer: _drawer,
      backgroundColor: backgroundColor,
      bottomNavigationBar: _buildBottomBar(),
    );
  }
}

class MyBottomNavigationBarItem {
  final Widget icon;
  final Widget title;
  final Color activeColor;
  final Color? inactiveColor;
  final TextAlign? textAlign;

  MyBottomNavigationBarItem(
      {Key? key,
      required this.icon,
      required this.title,
      this.activeColor = Colors.blue,
      this.inactiveColor,
      this.textAlign});
}
